import React from 'react';
import { Tree } from 'antd';
import type { GetProps, TreeDataNode } from 'antd';
import { FunctionOutlined } from '@ant-design/icons';

type DirectoryTreeProps = GetProps<typeof Tree.DirectoryTree>;

const { DirectoryTree } = Tree;

const treeData: TreeDataNode[] = [
  {
    title: 'KPMS Commands',
    key: '0-0',
    children: [
      { title: 'setPressure', key: '0-0-0', isLeaf: true, icon: <FunctionOutlined /> },
      { title: 'setMagnetic', key: '0-0-1', isLeaf: true },
      { title: 'setTemperature', key: '0-0-2', isLeaf: true },
    ],
  },
  {
    title: 'KXD Commands',
    key: '0-1',
    children: [
      { title: 'set X-Ray strength', key: '0-1-0', isLeaf: true },
      { title: 'set Incident Slit', key: '0-1-1', isLeaf: true },
      { title: 'turn left arm', key: '0-1-2', isLeaf: true },
      { title: 'turn right arm', key: '0-1-3', isLeaf: true },
    ],
  },
];

const CommandLibPanel: React.FC = () => {
  const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
    console.log('Trigger Select', keys, info);
  };

  const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
    console.log('Trigger Expand', keys, info);
  };

  return (
    <DirectoryTree
      className="command-lib-tree"
      style={{ height: '100%', overflowY: 'auto' }}
      multiple
      draggable
      defaultExpandAll
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={treeData}
    />
  );
};

export default CommandLibPanel;
